import React, { useState } from'react';
import { View,Image } from '@tarojs/components';
import BottomNavigation from '../../components/BottomNavigation/BottomNavigation';
import './index.scss';
import Taro from "@tarojs/taro";
import { navigateTo } from '@/utils/navigation'
import { WxLogin } from '../../utils/wxLogin';
import { request } from '../../utils/request';
import { useUser } from '../../hook/useUser';
import { useDictData } from '../../hook/useDictData';

const Index: React.FC = () => {
  const { user, logout } = useUser();
  const { data: appraiserLevels, loading: appraiserLoading } = useDictData('member_appraiser_level');
  const appraiserLevelName = appraiserLevels.find(l => l.value === String(user?.appraiserLevel))?.label;
  const [selectedIndex, setSelectedIndex] = useState(0);
  const handleGo = (path: string) => {
    Taro.navigateTo({
      url: path,
    });
  };

  const handleWxLogin = async () => {
    try {
      // 调用 WxLogin.login 获取 token
      const token = await WxLogin.login();

      if (token) {
        Taro.showToast({ title: '登录成功', icon: 'success' });

        // 登录成功跳转首页
        Taro.reLaunch({ url: '/pages/index/index' });
      } else {
        Taro.showToast({ title: '登录失败', icon: 'none' });
      }
    } catch (err) {
      console.error(err);
      Taro.showToast({ title: '微信登录失败', icon: 'none' });
    }
  };
  return (
    <View className="user-page">
      <View className="content">
        <View className="user-box">
          <View
            className="user"
            onClick={() => {
              if (user) {
                // 已登录，跳转编辑用户信息页
                handleGo('/pages/user/save-user/index');
              } else {
                // 未登录，跳转登录页
                handleWxLogin()
              }
            }}
          >
            <View className="photo">
              <Image src={user?.avatar ? user?.avatar : require(`../../assets/photo.png`)}></Image>
            </View>
            <View className="msg">
              <View className="user-msg">

                <View className="name">{user?.nickname ? user?.nickname : '立即登录' }</View>

                {user?.level && (
                  <View className="member">
                    {`${user.level}级会员`}
                  </View>
                )}
              </View>

              <View className="appraiser">
                <View className="appraiser-title">
                  {user?.appraiserLevel ? `${appraiserLevelName}` : null}
                </View>

                <View className="back">
                  <Image src={require(`../../assets/back.png`)}/>
                </View>
              </View>
              <View className="dsc">个人简介内容······</View>

            </View>
          </View>
          <View className="num-box" onClick={() => handleGo('/pages/user/my-attention/index')}>
            <View className="num-item">
              <View className="num">0</View>
              <View className="name">关注</View>
            </View>
            <View className="num-item">
              <View className="num">0</View>
              <View className="name">粉丝</View>
            </View>
            <View className="num-item">
              <View className="num">0</View>
              <View className="name">点赞</View>
            </View>
            <View className="num-item">
              <View className="num">0</View>
              <View className="name">收藏</View>
            </View>
          </View>
        </View>
        <View className="set-box set-top">
          <View className="set-item" onClick={() => handleGo('/pages/user/my-coupon/index')}>
            <Image src={require(`../../assets/user/coupon.png`)}/>
            <View className="name">我的优惠券</View>
          </View>
          <View className="set-item" onClick={() => handleGo('/pages/user/my-appraisal/index')}>
            <Image src={require(`../../assets/user/authenticate.png`)}/>
            <View className="name">我的鉴定</View>
          </View>
          <View className="set-item" onClick={() => handleGo('/pages/user/my-content/index')}>
            <Image src={require(`../../assets/user/college.png`)}/>
            <View className="name">我的内容</View>
          </View>
          <View className="set-item" onClick={() => handleGo('/pages/user/my-school/index')}>
            <Image src={require(`../../assets/user/coupon.png`)}/>
            <View className="name">我的鉴定学院</View>
          </View>
          <View className="set-item" onClick={() => handleGo('/pages/user/my-service/index')}>
            <Image src={require(`../../assets/user/service.png`)}/>
            <View className="name">我的客服</View>
          </View>
        </View>

        <View className="set-box">
          <View className="set-item" onClick={() => handleGo('/pages/user/identification-tool/index')}>
            <Image src={require(`../../assets/user/tool.png`)}/>
            <View className="name">内部鉴定工具</View>
          </View>
        </View>
        {user && (
          <View className="out">
            <View className="out-but" onClick={logout}>
              退出登录
            </View>
          </View>
        )}

      </View>
      <BottomNavigation selectedIndex={selectedIndex} onTabChange={setSelectedIndex} />
    </View>
  );
};

export default Index;
